<template>
  <div ref="container" class="w-full h-full mx-0 my-auto">
    <div ref="chart" />
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    option: {
      type: Object,
      default: () => {
        return {}
      },
    },
    title: {
      type: String,
      default: '',
    },
    xName: {
      type: String,
      default: '',
    },
    yName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      originOption: {
        // 渐变色设置
        // visualMap: [
        //   {
        //     show: false,
        //     type: 'continuous',
        //     seriesIndex: 0,
        //     min: 0,
        //     max: 400,
        //   },
        //   {
        //     show: false,
        //     type: 'continuous',
        //     seriesIndex: 0,
        //     dimension: 0,
        //     min: 0,
        //     max: 6,
        //   },
        // ],
        title: {
          show: true,
          left: 'center',
          top: '1%',
          text: '',
          subtext: '',
          textStyle: {
            color: '#fff',
            // fontSize: '100',
            // fontWeight: 'normal',
            // lineHeight: '1.25rem',
          },
        },
        legend: {
          show: true,
          // type: 'plain',
          // left: 0,
          bottom: '5%',
          icon: 'circle',
          padding: 1,
          itemStyle: {
            // color: '#fff'
          },
          textStyle: {
            // fontSize: 10,
            color: '#FFFFFF',
          },
        },
        textStyle: {
          color: '#bbb',
        },
        grid: {
          x: '7%',
          y: '10%',
          x2: '10%',
          y2: '20%'
        },
        xAxis: {
          type: 'category',
          nameTextStyle: {
            fontSize: 20
          },
          axisLabel: {
            fontSize: 20
          },
          // name: 'm', // 坐标名称
          data: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130, 135, 140, 145, 150, 155, 160, 165, 170, 175, 180]
        },
        yAxis: {
          type: 'value', // 坐标名称
          axisLabel: {
            fontSize: 20
          },
          nameTextStyle: {
            fontSize: 20
          },
          splitLine: {
            show: true, // 显示水平刻度线
            color: "#f00",
            lineStyle: {
              color: ['rgba(255,255,0,0.2)'],
              type: [3, 3]
            }
          },
          axisTick: {
            show: false, // 显示刻度
          },
        },
        series: [
          {
            name: '2年',
            data: [0, 0.756036486, 1.554920189, 2.403189152, 3.309106672, 4.283344022, 5.340042352, 6.498539454, 7.786334816, 9.244540311, 10.93882408, 12.98415842, 15.61119438, 19.39971251, 26.67899025, 35.62226169, 40.81654502, 44.51032518, 47.40505073, 49.80429937, 51.86598287, 53.68248348, 55.31246455, 56.7955033, 58.15957367, 59.42519218, 60.6078642, 61.71960255, 62.7699107, 63.76644198, 64.71545519, 65.62213758, 66.4908391, 67.32524568, 68.12850965, 68.90334949, 69.65212713],
            type: 'line',
            smooth: true,
            symbolSize: 0,

          },
          {
            name: '3年',
            data: [0, 0.849237985, 1.746605239, 2.699445793, 3.717041614, 4.811379492, 5.998343846, 7.299656366, 8.746206576, 10.38417448, 12.28732354, 14.58479946, 17.53568709, 21.79124031, 29.96788161, 40.01364785, 45.84826403, 49.99740031, 53.24897737, 55.94399688, 58.25983741, 60.30026978, 62.13118914, 63.79705165, 65.32927978, 66.75091926, 68.07938689, 69.32817641, 70.50796282, 71.62734294, 72.69334714, 73.71180212, 74.68759409, 75.62486335, 76.52715086, 77.39751021, 78.2385945],
            type: 'line',
            smooth: true,
            symbolSize: 0,

          },
          {
            name: '5年',
            data: [0, 0.966657986, 1.988099842, 3.07268502, 4.230978861, 5.47662551, 6.827705646, 8.308944311, 9.955501976, 11.81994372, 13.98623195, 16.60136867, 19.96026117, 24.80420901, 34.1113947, 45.54614013, 52.18748028, 56.91029743, 60.61145422, 63.67910095, 66.31514148, 68.6376945, 70.72176616, 72.61795937, 74.36204122, 75.98024387, 77.49239226, 78.91384582, 80.25675555, 81.53090692, 82.74430233, 83.90357412, 85.01428409, 86.08114501, 87.10818742, 88.09888712, 89.05626404],
            type: 'line',
            smooth: true,
            symbolSize: 0,

          },
          {
            name: '10年',
            data: [0, 1.125987, 2.315787599, 3.579139094, 4.92834825, 6.379308108, 7.953079484, 9.678462717, 11.59641359, 13.7681612, 16.291507, 19.33768258, 23.25020319, 28.89255279, 39.73379162, 53.05326437, 60.78926073, 66.29051433, 70.6017128, 74.17498317, 77.24550801, 79.9508749, 82.37845284, 84.58718533, 86.61873478, 88.50365702, 90.26504466, 91.92078874, 93.48504303, 94.96920588, 96.3825987, 97.732947, 99.02672929, 100.2694351, 101.4657594, 102.6197508, 103.734927],
            type: 'line',
            smooth: true,
            symbolSize: 0,

          },
          {
            name: '20年',
            data: [0, 1.285316014, 2.643475356, 4.085593167, 5.62571764, 7.281990706, 9.078453323, 11.04798112, 13.2373252, 15.71637867, 18.59678206, 22.0739965, 26.54014522, 32.98089657, 45.35618854, 60.5603886, 69.39104119, 75.67073122, 80.59197138, 84.67086538, 88.17587455, 91.2640553, 94.03513952, 96.5564113, 98.87542833, 101.0270702, 103.0376971, 104.9277317, 106.7133305, 108.4075048, 110.0208951, 111.5623199, 113.0391745, 114.4577253, 115.8233314, 117.1406144, 118.4135899],
            type: 'line',
            smooth: true,
            symbolSize: 0,

          },
          {
            name: '30年',
            data: [0, 1.378517513, 2.835160406, 4.381849808, 6.033652583, 7.810026176, 9.736754817, 11.84909804, 14.19719696, 16.85601283, 19.94528153, 23.67463753, 28.46463793, 35.37242437, 48.6450799, 64.95177477, 74.4227602, 81.15780636, 86.43589802, 90.81056289, 94.56972909, 97.8818416, 100.8538641, 103.5579596, 106.0451344, 108.3527973, 110.5092198, 112.5363055, 114.4513826, 116.2684058, 117.998787, 119.6519844, 121.2359295, 122.7573429, 124.2219726, 125.6347751, 127.0000573],
            type: 'line',
            smooth: true,
            symbolSize: 0,

          }
        ],
        // color: []
      },
    }
  },
  computed: {
    computedOption() {
      let newOption = Object.assign(this.originOption, this.option)
      const xDateList = this.data.map(function (item) {
        return item[0]
      })
      const yDateList = this.data.map(function (item) {
        return item[1]
      })

      // newOption.xAxis.data = xDateList
      // newOption.series.push({
      //   data: yDateList,
      //   type: 'line',
      // })

      newOption.title.text = this.title

      newOption.yAxis.name = this.yName

      newOption.xAxis.name = this.xName

      // 根据数据设置渐变最大值
      // 直接寻找最大值
      // newOption.visualMap[0].max = yDateList.reduce((y, current) => {
      //   y = y >= current ? y : current
      //   return y
      // }, 0)
      // newOption.visualMap[1].max = xDateList.length - 1

      return newOption
    },
  },
  mounted() {
    const containerDom = this.$refs.container
    const chartDom = this.$refs.chart

    chartDom.style.height = containerDom.clientHeight + 'px'

    const myChart = echarts.init(chartDom)

    this.computedOption && myChart.setOption(this.computedOption)

    window.onresize = () => {
      chartDom.style.height = containerDom.clientHeight + 'px'
      myChart.resize()
    }
  },
}
</script>
